<template>
  <div class="table-bg">
  </div>
</template>

<script>
import HttpInterface from "../../../util/httpInterface";

export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    getDeviceNumInfo (data) {
      var _this = this;
      let params = {
        bidSection: data || ""
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DEVICE_DEVICE_SHOW, params, function (response) {
        var data = response.data;
        let deviceFace = [];
        let deviceCar = [];
        deviceFace.push({
          name: "设备在线",
          value: data[0].online
        })
        deviceFace.push({
          name: "设备离线",
          value: data[0].offline
        })

        deviceCar.push({
          name: "设备在线",
          value: data[1].online,
          itemStyle: {
            color: "#FD6767"
          }
        })
        deviceCar.push({
          name: "设备离线",
          value: data[1].offline,
          itemStyle: {
            color: "#044382"
          }
        })
        _this.initECharts(deviceFace, deviceCar);
      }, null)
    },

    initECharts(deviceFace, deviceCar) {
      var echarts = require('echarts');
      var myChart = echarts.init(document.querySelector('.table-bg'));
      let option = {
        color: ['#57e897', '#044382'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
          name: "人脸设备",
          radius: ['45%', '60%'],
          center: ['50%', '50%'],
          type: 'pie',
          hoverAnimation: false, //鼠标移入变大
          label: {
            normal: {
              show: true,
              formatter: '人脸{b}: {@2012} ',
              textStyle: {
                fontSize: 13,
                color: '#67f6f1',
              },
              position: 'outside'
            },
            emphasis: {
              show: true
            }
          },
          // 引导线
          labelLine: {
            normal: {
              show: true,
              length: 6,
              length2: 14
            },
            emphasis: {
              show: true
            }
          },
          data: deviceFace
        }, {
          name: '车辆设备',
          radius: ['20%', '35%'],
          center: ['50%', '50%'],
          type: 'pie',
          hoverAnimation: false, //鼠标移入变大
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          data: deviceCar
        }]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style  scoped>
.table-bg{
  width: 100%;
  height: 100%;
}
</style>
